<template lang="pug">
  div.cycleTabWrapper
    div.tab-title-box
      a.tab-title(
        v-for="(tab, index) in tabs"
        :key="tab.name"
        :class="{active: curTab === tab.path}"
        :style="{'z-index': tabs.length - index}"
        @click="() => routeToggle(tab)"
      ) {{tab.meta.title}}
    .tab-content-box
      transition(name="fade-transform" mode="out-in")
        keep-alive
          router-view
</template>
<script>
import { mapGetters } from 'vuex'
import { findTreeNode } from '@/utils/arrayToTree'

export default {
  name: 'CRM',
  components: {
  },
  data () {
    return {
      curTab: '',
      tabs: []
    }
  },
  computed: {
    ...mapGetters(['curArea', 'addRoutes'])
  },
  created () {
    this.getTab()
  },
  methods: {
    async getTab () {
      const node = await findTreeNode({ value: 'operative::crm', key: 'name', tree: this.addRoutes })
      this.tabs = node.children.filter(x => !x.hidden)
      this.curTab = this.$route.path
    },
    routeToggle (tab) {
      this.$router.push(tab.path)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
